// /index/assess/waitGrade/assessPointDetails    待我评分/考核点详情
import React, {PureComponent} from "react"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import {fetchNowPerson} from "./../actions"


/*ant 组件*/
import {Input, Button, Icon, Tag, Menu, Avatar,Checkbox,Radio } from "antd"
const Search = Input.Search;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;










/*redux连接池*/
@connect(
    ({waitGrade}) => ({
      nowProjectPoint: waitGrade.nowProjectPoint, // 项目里的所有考核点
      pointIndex:waitGrade.pointIndex
    }),
    (dispatch) => (
      bindActionCreators({
        fetchNowPerson
      }, dispatch)
    )
)
export default class Board extends PureComponent {
  state = {
    intelligentShow:false,
    checkAll:false,
    list:[],
    allCheckArr:[],
    indeterminate:false 
  }

  render() {
    const {nowProjectPoint,pointIndex} = this.props;
    const {intelligentShow,checkAll,allCheckArr,list,indeterminate} = this.state;
    const listAllPerson = nowProjectPoint[pointIndex].person;
    return (
      <div className="boardTwoWrap">

        {/*非智能打分*/}
        <div className="pointDetails-board" style={{display:!intelligentShow?"block":"none"}}>            
              <div className="pointDetails-board-filter">
                <h4>
                  东南派出所考核板
                  <label htmlFor="">36人</label>
                </h4>
                <div>
                  <RadioGroup onChange={()=>{}} defaultValue="all">
                    <RadioButton value="all">全部</RadioButton>
                    <RadioButton value="wait">未考</RadioButton>
                  </RadioGroup>
                  <Search style={{width:'120px',float:'right'}}></Search>
                </div>
              </div>
              <div className="pointDetails-board-content">                             
                <Menu
                  onClick={(datas)=>this.handleClickNormal(datas)}
                  style={{ width: 300}}
                  mode="inline"
                >
                {
                  listAllPerson.map((item,index) => {
                    return (
                      <Menu.Item key={`${index}`}>
                        <Avatar size="large" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                        <ul className="Job">
                          <li>{item.name}</li>
                          <li>中队长</li>
                        </ul>
                        <p style={{float:"right"}}>4.5分</p>
                      </Menu.Item>
                    )
                  })
                } 
                </Menu>
              </div>
              <Button type="primary" className="doFen" onClick={this.intelligentToggle}><Icon type="caret-left" />智能打分</Button>
         </div>

         {/*智能打分*/}
         <div className="pointDetails-board-intelligent" style={{display:intelligentShow?"block":"none"}}>            
              <div className="pointDetails-board-intelligent-title">
                <h4>
                  东南派出所考核板(智能)
                  <label htmlFor="">36人</label>
                </h4>
                <div className="checkHandle">
                  <p>*对框选人员进行统一打分</p>
                  <div className="checkAndGrade">
                    <Checkbox 
                      onChange={this.checkAllHandle} 
                      checked={checkAll}
                      indeterminate={indeterminate}
                    >Checkbox</Checkbox>
                    <div className="grade">
                      <Input />
                      <Button type="primary" icon="check" ghost></Button>                    
                    </div>
                  </div>
                </div>
              </div>
              <div className="pointDetails-board-intelligent-content">              
                <Menu
                  onClick={(item, key, keyPath)=>{this.handleClickIntelligent(item)}}
                  style={{ width: 300}}
                  mode="inline"
                  multiple
                >
                {
                  listAllPerson.map((item,index)=>{
                    return(
                      <Menu.Item key={`${index}`}>
                        <Checkbox onChange={()=>{}} checked={allCheckArr[index]}/>
                        <Avatar size="large" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                        <ul className="Job">
                          <li>{item.name}</li>
                          <li>中队长</li>
                        </ul>
                        <p style={{float:"right"}}>4.5分</p>
                      </Menu.Item>
                    )
                  })
                }
                </Menu>
              </div>
              <Button type="primary" className="doFen" onClick={this.intelligentToggle}>取消</Button>
         </div>
       </div>
    )
  }
  componentWillMount() {

    const {nowProjectPoint,pointIndex} = this.props;

    this.setState({
        // 默认checkBox都没有选中，组件一个false数组
        allCheckArr:nowProjectPoint[pointIndex].person.map(()=>false) 
    })

    // 默认渲染的nowPerson，取第一个
    this.props.fetchNowPerson(nowProjectPoint[pointIndex].person[0]);

  }

  componentWillReceiveProps() {
      const {nowProjectPoint,pointIndex} = this.props;
      this.props.fetchNowPerson(nowProjectPoint[pointIndex].person[0]);
  }

  /*切换面板*/
  intelligentToggle = () => {
    this.setState({
      intelligentShow:!this.state.intelligentShow
    })
  }

  /*======================================普通考核板的方法================================================*/
  
  /*点击menu时候的回调*/
  handleClickNormal = (item) => {
    const {nowProjectPoint,pointIndex} = this.props;
    //把对应key的nowPerson，传递到右边使用，格式如下
    /* {
        name: "德莱文",
        point: [99, 22, 33, 44]
    }*/
    this.props.fetchNowPerson(nowProjectPoint[pointIndex].person[item.key]);
  }

  /*======================================智能考核板的方法================================================*/


  /*点击menu时候的回调*/
  handleClickIntelligent = (item, key, keyPath) => {
    const allCheckArrClone = this.state.allCheckArr.slice(0);
    allCheckArrClone[item.key] = !allCheckArrClone[item.key];
    this.setState({
      allCheckArr:allCheckArrClone,
      checkAll:allCheckArrClone.every((item)=>item),
      indeterminate: allCheckArrClone.some((item)=>item) && allCheckArrClone.some((item)=>!item) // 至少有一项为true，至少有一项为false =>  必须有选中的，并且不能全选
    })
  }

  checkAllHandle = (e) => {
    this.setState({checkAll:e.target.checked});
    if (e.target.checked) {
      this.setState({
        allCheckArr:this.state.allCheckArr.map(()=>true)
      })
    } else {
      this.setState({
        allCheckArr:this.state.allCheckArr.map(()=>false)
      })
    }  
  }
}
